<!--故障信息设置 -->
<template>
    <div class="Maintenance">
        <div class="Maintenance-left">
            <div class="maintenance" v-for="(v, i) in modelsArr"
                :class="[modelistId.assemblyId == v.assemblyId ? 'on' : '']" :key="v.assemblyId">
                <div class="title" @click="model_click(v)"> {{ v.assemblyName }}</div>

                <img class="img" @click="delModeClick(v)" src="../../../assets/imgx/off.png" alt="">

            </div>

        </div>
        <div class="Maintenance-right">

            <div class="table">

                <slotCom>
                    <template v-slot:com>
                        <tBcomdev :tableListArr="tableListArr" @deltTable="deltTable"
                            @look_programme_fun="look_programme_fun" @right_icon_fun="right_icon_fun"
                            @edit_btn_fun="edit_btn_fun" @errorTitle="errorTitle" />
                    </template>
                </slotCom>

            </div>
            <pageChild :total="total" :pageSize="pageSize" :current="current" @currentChange="currentChange" />

        </div>
        <div class="zezaoc">

            <div @click="editisBool1 = !editisBool1; edit = {}">添加</div>

            <el-upload accept=".xls,.xlsx" :show-file-list="false" class="apply-import-button" name="file"
                :http-request="httPreQuest" :before-upload="beforeAvatarUpload" action="/biz/mesConfig/importData">
                <el-button size="small" class="btn-custom-import">批量导入</el-button>
            </el-upload>
            <div @click="import_model">下载模板</div>
            <Btn_box />

        </div>
        <div class="addzzc" v-show="isbool_play">
            <topIndex>
                <template v-slot:com>
                    <div class="listzzc_2">
                        <div class="listzzc_3">
                            <div class="MaskLayeR_top">
                                <div>查看方案</div>
                                <img src="../../../assets/imgx/message-bg.png" alt="">

                                <span class="off" @click="isbool_play = false; getPlan = []">×</span>
                            </div>
                            <div class="MaskLayeR_button">
                                <table border="1" cellspacing="1">
                                    <thead>
                                        <tr>
                                            <th>解决方案</th>
                                            <th>关联工件</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(v, i) in getPlan" :key="i">
                                            <!-- w -->
                                            <td>{{ v.description }}</td>
                                            <td>{{ v.workpieceName }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </template>
            </topIndex>

        </div>
        <div class="listzzc" v-show="editisBool1">
            <topIndex>
                <template v-slot:com>
                    <div class="listzzc_2">
                        <div class="listzzc_3">
                            <div class="listzzc_top">
                                <div>{{ edit.exceptId ? '编辑' : '添加' }}</div>
                                <img src="../../../assets/imgx/message-bg.png" alt="">
                                <span class="error" @click="editisBool1 = false">×</span>
                            </div>
                            <div class="listzzc_center">
                                <addcomponent :modelistId="modelistId" :editList="edit" @excEptClick="excEptClick"
                                    @errorTitle="errorTitle" />
                            </div>
                        </div>
                    </div>
                </template>
            </topIndex>


        </div>
        <div class="listzzc_1" v-show="addeditisBool1">
            <topIndex>
                <template v-slot:com>
                    <div class="listzzc_2">
                        <div class="listzzc_3">
                            <div class="listzzc_top_1">
                                <div>新增方案</div>
                                <img src="../../../assets/imgx/message-bg.png" alt="">
                                <span class="error" @click="addeditisBool1 = false">×</span>
                            </div>
                            <div class="listzzc_center_1">
                                <addpalyitem :options="options" :except="except" @reSetFun="PlayFun" :modelsArr="modelsArr"
                                    @errorTitle="errorTitle" />
                            </div>
                        </div>
                    </div>
                </template>
            </topIndex>

        </div>
        
        <div class="lod" v-show="elIconWarningBool">
            <lodFile :doScTitle="doScTitle" />
        </div>
    </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex"
import { GetModuleApi, delModelApi } from "@/api/SettingsApi/index.js"
import Btn_box from "@/components/uponelevel/index.vue"

import { fault_Table_List, inportExceptTileApi, addfileapi, getPlanPageByExcepId, getWorkPage } from "@/api/fulitModelApi/index.js"
export default {
    components: {
        tBcomdev: () => import("./tableChildcom/index.vue"),
        addcomponent: () => import("./addchildren/index.vue"),
        addpalyitem: () => import("./addpalyitem/index.vue"),
        slotCom: () => import("@/components/SslotCom/index.vue"),
        topIndex: () => import("@/components/SslotCom/top_index.vue"),
        lodFile: () => import("@/components/outfilelod/index.vue"),
        pageChild: () => import("@/components/pagination/index.vue"),

        Btn_box


    },
    data() {
        return {
            elIconWarningBool: false,
            doScTitle: "",

            infilebool: false,
            isbool_play: false,
            addeditisBool1: false,
            editisBool1: false,
            isbool: false,
            Mkedsd: "",
            modelsArr: [],
            tableListArr: [],
            show: false,
            file: "",
            modelistId: {},
            total: 0,
            pageSize: 10,
            current: 1,
            getPlan: [],
            options: [],
            except: [],
            edit: {},
            item3: ""
        }
    },
    mounted() {
        this.DroASideFun()
    },

    methods: {
        ...mapActions("Tableindex", ["asyncmy_table_function"]),
        ...mapMutations("Tableindex", ["modelfun"]),
        delModeClick(item) {
            delModelApi({ assemblyId: item.assemblyId }).then(res => {
                if (res.code != 200) {
                    this.errorTitle(res)


                }
            })
        },
        PlayFun() {
            this.addeditisBool1 = false;
            this.my_table_fun(this.modelistId.assemblyId);

        },
        // 添加和编辑的模态框隐藏
        excEptClick(item) {
            this.editisBool1 = item;
            this.my_table_fun(this.modelistId.assemblyId);
        },
        deltTable() {

            this.my_table_fun(this.modelistId.assemblyId);

        },
        right_icon_fun(item) {
            this.addeditisBool1 = true
            this.except = item;
        },
        // 页码
        currentChange(current) {
            this.current = current
            if (this.modelistId) {
                this.my_table_fun(this.modelistId.assemblyId);
            }
        },
        // 编辑
        edit_btn_fun(item) {
            this.edit = item;
            this.editisBool1 = true;
        },
        //上传
        httPreQuest(file) {
            let formData = new FormData()
            formData.append('file', file.file)
            inportExceptTileApi({
                file: formData,
                updateSupport: true
            }).then(res => {
                this.elIconWarningBool = true;
                this.doScTitle = res.msg
                if (res.code == 200) {
                    this.DroASideFun()
                } else {


                    this.errorTitle(res)


                }

            })
        },
        errorTitle(res) {
            this.doScTitle = res.msg;
            this.elIconWarningBool = true
            clearInterval(this.time3)
            this.time3 = setInterval(() => {
                this.elIconWarningBool = false
            }, 3000)
        },
        // 查看
        look_programme_fun(item) {
            console.log(item);
            this.getPlan = item.planList
            this.isbool_play = true;
        },
        // 导出
        import_model() {

            window.location.href = window.location.origin + '/media/assets/templateExcept.xlsx'
        },

        // 点击模块
        model_click(item) {
            this.modelistId = item;
            console.log(item.assemblyId);
            this.my_table_fun(item.assemblyId);

            getWorkPage({
                assemblyId: item.assemblyId
            }).then(res => {
                if (res.code == 200) {
                    this.options = res.data.list;
                } else {
                    this.errorTitle(res)


                }

            })
        },
        beforeAvatarUpload(file) {
            console.log(file.type);
            const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (!isJPG) {
                this.$message.error('只能是execl文件');
            }

            return isJPG;
        },
        DroASideFun() {

            GetModuleApi({
                equipmentId: this.$store.state.UserIndex.equipment.equipmentId
            }).then(res => {
                if (res.code == 200) {
                    this.modelsArr = res.data;
                    this.modelistId = res.data[0]
                    if (this.modelistId) {
                        this.my_table_fun(this.modelistId.assemblyId);
                        getWorkPage({
                            assemblyId: this.modelistId.assemblyId
                        }).then(res => {
                            if (res.code == 200) {
                                this.options = res.data.list;
                            } else {
                                this.errorTitle(res)

                            }


                        })
                    }


                } else {
                    this.errorTitle(res)

                }
            })

        },
        //列表接口
        my_table_fun(id) {
            fault_Table_List({
                current: this.current,
                size: this.pageSize,
                assemblyId: id
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    // for (let index = 0; index <= 10; index++) {
                    //     if (res.data.list.length >= 10) {
                    this.tableListArr = res.data.list
                    this.total = Number(res.data.total);
                    this.pageSize = res.data.pageSize;
                    this.current = res.data.pageNum;

                    //     } else {
                    //         res.data.list.push({ "title": "1" })
                    //     }

                    // }

                } else {

                    this.doScTitle = res.msg;
                    this.elIconWarningBool = true
                    this.time3 = setInterval(() => {
                        this.elIconWarningBool = false
                    }, 3000)
                }

            })
        },
    }
}
</script>
<style lang="less" scoped>
.lod {
    position: fixed;
    top: 5%;
    left: 790px;
    z-index: 999;

}

.el-select-dropdown {
    background-color: none !important;
    z-index: 2002 !important;
}

.table {
    width: 99%;
    height: 778px;
    overflow: auto;

}

.el-button--small {
    padding: 9px 13px;
    font-size: 16px;
    border-radius: 3px;
}

.el-select-dropdown,
.el-scrollbar,
.el-select-dropdown__list .el-select-dropdown__list {

    background: #5B9FC3 !important;
    color: white !important;
    border: 0px !important;
}


.listzzc {
    background: #091123;
    border: 1px solid #113D71;
    width: 452px;
    height: 392px;
    opacity: 0.95;
    position: absolute;
    top: 7%;
    right: 36%;


    .listzzc_2 {
        width: 100%;
        height: 100%;

        background: rgb(3 55 139 / 36%);

        .listzzc_3 {
            width: 100%;
            height: 100%;
            box-shadow: inset 0px 0px 54px 0px #0d3eb8b5;


            .listzzc_top {
                width: 100%;
                height: 29px;
                display: flex;
                position: relative;

                div {
                    width: 15%;
                    height: 29px;

                    text-align: center;
                    line-height: 29px;
                    color: white;
                }

                img {
                    width: 90%;
                    height: 100%;
                }

                .error {
                    width: 18px;
                    height: 18px;
                    text-align: right;
                    font-size: 36px;
                    font-weight: bold;
                    color: #0E66B3;
                    z-index: 99;
                    cursor: pointer;
                    line-height: 22px;
                    position: absolute;
                    right: 15px;
                }
            }

            .listzzc_center {
                width: 100%;
                height: 40px;
            }
        }
    }

}

.listzzc_1 {
    background: #091123;
    border: 1px solid #113D71;
    width: 452px;
    height: 340px;
    opacity: 0.95;
    position: absolute;
    top: 9%;
    right: 38%;


    .listzzc_2 {
        width: 100%;
        height: 100%;

        background: rgb(3 55 139 / 36%);

        .listzzc_3 {
            width: 100%;
            height: 100%;
            box-shadow: inset 0px 0px 54px 0px #0d3eb8b5;

            .listzzc_top_1 {
                width: 100%;
                height: 30px;
                display: flex;
                position: relative;

                div {
                    width: 18%;
                    height: 100%;
                    text-align: center;
                    line-height: 30px;
                    color: white;
                }

                img {
                    width: 82%;
                    height: 100%;
                }

                .error {
                    width: 18px;
                    height: 18px;
                    text-align: right;
                    font-size: 36px;
                    font-weight: bold;
                    color: #0E66B3;
                    z-index: 99;
                    cursor: pointer;
                    line-height: 22px;
                    position: absolute;
                    right: 15px;
                }
            }

            .listzzc_center_1 {
                width: 100%;
                height: 40px;
            }
        }
    }
}

::-webkit-scrollbar {
    list-style: none;
}

.zezaoc /deep/ .el-upload-list {
    display: none !important;
}

.btn {
    margin: 10%;
    background: #031231;
    width: 81px;
    height: 50px;
    opacity: 1;
    border: 1px solid #5B9FC3;
    text-align: ceter;
    line-height: 50px;
    color: white;
}

.addzzc {

    background: #091123;
    border: 1px solid #113D71;
    width: 435px;
    height: 340px;
    opacity: 0.95;
    position: absolute;
    top: 9%;
    right: 38%;
    color: white;


    .listzzc_2 {
        width: 100%;
        height: 100%;

        background: rgb(3 55 139 / 36%);

        .listzzc_3 {
            width: 100%;
            height: 100%;
            box-shadow: inset 0px 0px 54px 0px #0d3eb8b5;

            .MaskLayeR_top {



                width: 100%;
                height: 29px;
                display: flex;
                position: relative;

                div {
                    width: 18%;
                    height: 100%;
                    text-align: center;
                    line-height: 25px;
                    color: white;
                }

                img {
                    width: 82%;
                    height: 100%;
                }

                .off {
                    width: 18px;
                    height: 18px;
                    text-align: right;
                    font-size: 36px;
                    font-weight: bold;
                    color: #0E66B3;
                    z-index: 99;
                    cursor: pointer;
                    line-height: 22px;
                    position: absolute;
                    right: 15px;

                }

            }

            .MaskLayeR_button {
                width: 405px;
                height: 85%;
                margin: 1px 1px 0px 16px;
                overflow: auto;

                table {
                    width: 100%;
                    border: 1px solid #113D71;
                    background: #030c20;
                    color: white;

                    thead {
                        width: 100%;
                        height: 40px;
                    }

                    tbody {
                        width: 100%;

                        tr {
                            width: 100%;
                            text-align: center;
                            height: 40px;
                            line-height: 40px;
                        }
                    }
                }

                input {
                    width: 111px;
                    height: 27px;
                    background: #031231;
                    opacity: 1;
                    border: 1px solid #5B9FC3;
                    outline: 0;
                }

            }
        }
    }
}

.Maintenance {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;


    .Maintenance-left {

        height: 100%;
        overflow-y: auto;
        cursor: pointer;


        .maintenance {
            flex: none;
            border: 1px solid #5B9FC3;
            text-align: center;
            line-height: 30px;

            color: white;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 10px 25px 10px 10px;
            width: 81px;
            height: 50px;
            background: #031231;
            opacity: 1;
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
                width: 100%;
                height: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .img {
                width: 20px;
                height: 20px;
            }

        }

        .addModel {
            margin: 15px 26px 10px 10px;

            background: #031231;
            width: 81px;
            height: 50px;
            opacity: 1;
            border: 1px solid #5B9FC3;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;

            div {
                height: 30px;
                line-height: 30px;
            }

            .img {
                width: 19px;
                height: 19px;
            }
        }
    }

    .Maintenance-right {
        overflow-x: hidden;
        overflow-y: auto;
        color: #000;
        font-size: .7rem;
        font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma;
    }

    /*滚动条样式*/
    .Maintenance-right::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 2px;
    }

    .Maintenance-right::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: rgba(96, 150, 225, 1);
        background: rgba(96, 150, 225, 1);
        height: 2px !;

    }

    .Maintenance-right::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: rgba(96, 150, 225, 1);
        border-radius: 0;

    }

    .Maintenance-right {
        width: 100%;
        margin-top: 10px;
    }

    .on {
        border: 1px solid #5ca0c3;
        box-shadow: 0 0 13px #007eff inset;
    }

    .zezaoc {
        height: 30px;
        position: fixed;
        font-size: 10px;
        top: 80px;
        left: 1480px;
        display: flex;
        cursor: pointer;

        div {
            width: 84.38px;
            height: 34.38px;
            background: #031231;
            opacity: 1;
            border: 1px solid #5B9FC3;
            text-align: center;
            line-height: 34.38px;
            color: white;
            margin: 0px 5px;

            .el-button--primary {
                height: 26px !important;
            }
        }

        .divitem {
            position: relative;
            border: 0px solid #5B9FC3;
            height: 40px;
            width: 95px;
            line-height: 40px;

            img {
                width: 100%;
                height: 100%;
            }

            .outbtn {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}



.el-pagination /deep/ .btn-prev {
    height: 100% !important;

}

.el-pagination /deep/ .btn-next {
    height: 100% !important;

}

.el-pagination /deep/ .el-pager {
    height: 100% !important;

    li {
        height: 100% !important;
    }
}
</style>